<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class = 'box' id = 'root'></div>
    <style>
        .box1{
            width: 50px;
            height: 50px;
        }
        .box2{
            background-color: red;
        }
    </style>
    <script>
        var root = document.getElementById('root')
        console.log(root.className)
        //操作class的内容要使用className
        root.className = 'box1'
        console.log(root.id)
        console.log(root.className)

        root.classList.add('box2')//直接给元素加一个box2的类名

        if(root.classList.contains('box2')){//contains判断是否存在某个类名
            console.log('yes')
        }else{
            console.log('no')
        }

        root.classList.remove('box2')//去除元素的一个叫box2的元素

        if(root.classList.contains('box2')){
            console.log('yes')
        }else{
            console.log('no')
        }

        root.classList.toggle('box2')//toggle如果存在就删除，不存在就添加
        if(root.classList.contains('box2')){
            console.log('yes')
        }else{
            console.log('no')
        }

        root.classList.toggle('box2')//通过这些对类名的操控可以控制元素的样式
        if(root.classList.contains('box2')){
            console.log('yes')
        }else{
            console.log('no')
        }

    

        root.innerHTML = '1111'//是一个变量而不是函数，不赋值就是读取Html内容
        console.log(root.innerHTML)
        root.innerText = '2222'//同理
        //区别，innerHTML能识别标签，innerText只能识别字符串
        //只能将插入内容以字符串形式插入，相当于使用了html的pre和code标签
        str = '<a href="https://baidu.com">百度</a>'
        root.innerHTML = str
        // root.innerText = str

    </script>
</body>
</html>